<template>
	<a-card style="margin: -15px">
		<a-row style="margin-bottom: 1rem">
			<a-col :span="6">
				<a-input-search
					v-model:value=this.page.keyword
					placeholder="根据藏品名称模糊搜索"
					enter-button="搜索"
					size="large"
					@search="onSearch"
				/>
			</a-col>
			<!--放置搜索条件-->
			<a-col :span="2">

			</a-col>

			<a-col :push=this.number :span="3">

			</a-col>

		</a-row>
		<a-row style="margin-bottom: 1rem">
			<a-col :span="24">
				<a-table :columns="columns" :data-source="data" :pagination="false" @change="onChange">
					<template #bodyCell="{ column, record }">
						<!--藏品-->
						<template v-if="column.key === 'nft'">
							<a-row style="margin-top: 0.5rem" :wrap="false">
								<a-col>
									<a-image width="3rem" height="3rem" :src="record.nftCover"></a-image>
								</a-col>
								<a-col style="margin: auto 2px;white-space:nowrap">
									<a @click="this.$refs.gatNftInfo.getNft(record.nftId)">{{ record.nftName }}</a>
								</a-col>
							</a-row>
						</template>
						<!--证书信息-->
						<template v-if="column.key === 'nftCert'">
							<a-row align="middle">
								<span>编号:{{ record.code }}</span>
							</a-row>
							<a-row>
								<span>链上标识:{{ record.contractAddr }}</span>
							</a-row>
						</template>
						<!--会员信息-->
						<template v-if="column.key === 'holder'">
							<a-row>
								<a-col>
									<a-image width="3rem" height="3rem" :src="record.mbAvatar"></a-image>
								</a-col>
								<a-col>
                <span>手机号:
                  <a @click="this.$refs.getMb.showGetMb(record.mbId)">{{ record.mbPhone }}</a>
                </span>
									<br>
									<span>链上标识:{{ record.mbChainAddr }}</span>
								</a-col>
							</a-row>
						</template>
						<!--状态-->
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="default">持有中</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="orange">挂售中</a-tag>
							<a-tag v-if="record.status==2" :bordered="false" color="success">转赠中</a-tag>
							<a-tag v-if="record.status==3" :bordered="false" color="error">已销毁</a-tag>
						</template>
						<!--资格名单-->
						<template v-if="column.key === 'record'">
							<a-tag :bordered="false" color="#108ee9" style="cursor: pointer">查看流转记录</a-tag>
						</template>

					</template>
				</a-table>
			</a-col>
		</a-row>
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:pageSizeOptions="['5','10','20','50','100']"
				show-size-changer
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
				@change="onChange"
			/>
		</a-flex>
	</a-card>
</template>

<script>
import {
	PieChartOutlined,
	DesktopOutlined,
	UserOutlined,
	TeamOutlined,
	FileOutlined,
	PlusOutlined,
	DownOutlined,
} from '@ant-design/icons-vue';
import nftCertApi from "@/api/nft/artWork/nftCertApi";

export default {
	name: "Market",
	components: {
		PieChartOutlined,
		DesktopOutlined,
		UserOutlined,
		TeamOutlined,
		FileOutlined,
		PlusOutlined,
		DownOutlined,
	},
	data() {
		return {
			data: [],
			number: 13,
			pagination: 11,
			size: 20,
			page: {
				pageNo: 1,
				pageSize: 5,
				total: 100,
				keyword: '',
				status: 1,
			},
			columns: [
				{
					title: '艺术品',
					key: 'nft',
				},

				{
					title: '证书信息',
					key: 'nftCert',
				},
				{
					title: '持有人',
					key: 'holder',
				},
				{
					title: '价格',
					dataIndex: 'nftPrice',
					key: 'nftPrice',
				},
				{
					title: '获取时间',
					dataIndex: 'releaseTime',
					key: 'releaseTime',
				}
			],
		};
	},
	methods: {
		//查询列表
		query() {
			debugger
			nftCertApi.pageCertList(this.page.pageNo, this.page.pageSize, {
				nftName: this.page.keyword,
				status: this.page.status
			}).then((resp) => {
				this.page.pageSize = resp.size;
				this.page.total = resp.total;
				this.data = resp.records;
			})
		},
		//搜索之前先把页码置为1
		onSearch() {
			this.page.pageNo = 1;
			this.query();
		},
		onChange(pageNo) {
			this.query();
			this.page.pageNo = pageNo;
		}
	},
	mounted() {
		this.query();
	}
};
</script>

<style scoped>

</style>
